<!-- 服务区 -->
<script>
import { defineComponent } from 'vue';
import SectionOne from './modules/Section-1/section-1.vue';
import SectionTwo from './modules/Section-2/section-2.vue';
import SectionThree from './modules/Section-3/section-3.vue';
import SectionFour from './modules/Section-4/section-4.vue';
import SectionFive from './modules/Section-5/section-5.vue';
import ShipWarningCombine from './modules/ShipWarningCombine/ShipWarningCombine.vue';
// import SectionSix from './modules/Section-6/section-6.vue';
export default defineComponent({
  name: "Main",
  components: {
    SectionOne,
    SectionTwo,
    SectionThree,
    SectionFour,
    SectionFive,
    ShipWarningCombine,
    // SectionSix
  },
  setup() {
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  watch: {
  },
  computed: {
    slideMode() {
      return this.$store.state.slideMode
    }
  },
  beforeRouteLeave() { },
  methods: {
  }
});
</script>
<template>
  <section-one class="slide-left" :class="[slideMode]"></section-one>
  <section-two class="slide-left" :class="[slideMode]"></section-two>
  <section-three class="slide-right" :class="[slideMode]"></section-three>
  <section-four class="slide-right" :class="[slideMode]"></section-four>
  <section-five class="slide-right" :class="[slideMode]"></section-five>
  <!-- <ship-warning-combine></ship-warning-combine> -->
</template>
<style scoped lang="less">
.slide-left,
.slide-right {
  transition: all .3s;
}
.slide-left.close {
  transform: translateX(-50rem);
}
.slide-right.close {
  transform: translateX(50rem);
}
</style>